<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
		<style>
			div{
				width: 200px;
				height: 80px;
				background-color: lightblue;
				margin: 10px;
			}
			.c1{
				background-color: red;
			}
			.c2{
				color: blue;
				background-color: greenyellow;
			}
		</style>
		<script>
			$(function(){
				//1.操作元素属性
				//attr()  添加或获取元素属性
				//prop() 特殊属性添加或获取,如checked
				console.log($("#div01").attr("id"));
				//静态添加name属性
				$("div").attr("name","abc");
				//动态添加属性
				$("div").attr("class",function(i,value){
					value="abc"+(i+1);
					return value;
				});
				//移除属性
				$(".abc4").removeAttr("name");
				//2.设置样式
				$("div").css("width",function(i,value){
					value=(50*(i+1))+"px";
					return value;
				});
				//3.对class操作
				//添加
				$("div").addClass("c1");
				//移除
				$("div:eq(3)").removeClass("c1");
				$("div").click(function(){
					//toggleClass开关事件
					$(this).toggleClass("c2");
				});
				//4.html()获取html元素  text()获取元素内文本  val()获取元素内value值
				//DOM方式
				document.getElementById("chk1").innerHTML="abc";
				document.getElementById("chk2").value="bbb";
				//jquery方式
				$("div").html("<a href='#'>aaa</a>");
				console.log($("div").html());
				console.log($("div").text());
				console.log($("#chk3").val());
			})
		</script>
	</head>
	<body>
		<div id="div01"></div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
		
		<input type="checkbox" id="chk1">
		<input type="checkbox" id="chk2">
		<input type="checkbox" id="chk3" value="xxxxxxxxxxx">
	</body>
</html>
